<template>
  <div class="department-detail">
    <a-card :title="`部门详情 - ${departmentInfo.name || ''}`">
      <template #extra>
        <a-button @click="goBack">返回列表</a-button>
        <a-button type="primary" @click="goToEdit" style="margin-left: 10px">编辑</a-button>
      </template>

      <a-descriptions bordered :column="2">
        <a-descriptions-item label="部门名称">{{ departmentInfo.name }}</a-descriptions-item>
        <a-descriptions-item label="部门主管">{{ departmentInfo.manager }}</a-descriptions-item>
        <a-descriptions-item label="员工人数">{{ departmentInfo.employeeCount }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ departmentInfo.createTime }}</a-descriptions-item>
        <a-descriptions-item label="部门描述" :span="2">
          {{ departmentInfo.description || '暂无描述' }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider orientation="left">部门成员</a-divider>

      <a-table
          :columns="memberColumns"
          :data-source="departmentMembers"
          :pagination="memberPagination"
          row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'gender'">
            {{ record.gender === 1 ? '男' : '女' }}
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? '在职' : '离职' }}
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 部门信息
const departmentInfo = ref({
  name: '',
  manager: '',
  employeeCount: 0,
  createTime: '',
  description: ''
})

// 部门成员表格列配置
const memberColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '工号',
    dataIndex: 'employeeId',
    key: 'employeeId'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  },
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  }
]

// 部门成员数据
const departmentMembers = ref([
  { id: 1, name: '张三', employeeId: '1001', gender: 1, position: '前端开发', status: 1 },
  { id: 2, name: '李四', employeeId: '1002', gender: 1, position: '后端开发', status: 1 },
  { id: 3, name: '王五', employeeId: '1003', gender: 2, position: 'UI设计师', status: 1 },
  { id: 4, name: '赵六', employeeId: '1004', gender: 1, position: '测试工程师', status: 1 }
])

const memberPagination = ref({
  current: 1,
  pageSize: 5,
  total: 4
})

// 获取部门详情
const fetchDepartmentDetail = () => {
  // 实际项目中应该调用API
  const mockData = [
    { id: 1, name: '技术部', manager: '张伟', employeeCount: 120, createTime: '2020-01-15', description: '负责公司技术研发工作' },
    { id: 2, name: '市场部', manager: '李娜', employeeCount: 90, createTime: '2020-02-20', description: '负责市场推广和品牌建设' },
    { id: 3, name: '人力资源部', manager: '王芳', employeeCount: 50, createTime: '2020-03-10', description: '负责公司人力资源管理工作' },
    { id: 4, name: '财务部', manager: '赵强', employeeCount: 30, createTime: '2020-04-05', description: '负责公司财务和资金管理' },
    { id: 5, name: '产品部', manager: '刘洋', employeeCount: 80, createTime: '2020-05-12', description: '负责产品规划和设计' }
  ]

  const department = mockData.find(item => item.id === parseInt(route.params.id))
  if (department) {
    departmentInfo.value = department
  }
}

// 跳转编辑页
const goToEdit = () => {
  router.push(`/department/edit/${route.params.id}`)
}

// 返回列表
const goBack = () => {
  router.push('/department/list')
}

onMounted(() => {
  fetchDepartmentDetail()
})
</script>

<style scoped>
.department-detail {
  padding: 20px;
}

.ant-descriptions {
  margin-bottom: 20px;
}
</style>